<template>
  <div class="usercenter">
    <!-- <h2>用户个人中心</h2> -->
    <div class="usercenter-header">
      <router-link to="/">
        <span class="linkhome"><van-icon name="arrow-left" /></span>
      </router-link>
      <span>个人中心</span>
    </div>
    <!-- 个人详细信息 -->
    <div class="usercenter-content">
      <div class="header-left">
        <ul>
          <li>
            <span>头像</span>
            <img :src="cuser.usercover" alt=""/>
          </li>
          <li>
            <span>名字</span>
            <h4>{{ cuser.username }}</h4>
          </li>
          <li>
            <span>苏哈号</span>
            <strong>{{ cuser.userid }}</strong>
          </li>
          <li>
            <span>邮箱</span>
            <p>{{ cuser.email }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div></div>
    <span @click="dislogin" class="buttom">退出登录</span>
    <pagebottom></pagebottom>
  </div>
</template>
<style lang="scss" scoped>
.usercenter {
  .usercenter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-top: 10px;
    background: #fafafa;
    color: #cccc;
    position: relative;
    height: 40px;
    .linkhome {
      position: absolute;
      top: 12px;
      left: 10px;
      color: #cccc;
      //    color: #fafafa;
    }
    span {
      font-size: 16px;
    }
  }
}
.usercenter-content {
  padding: 0 15px;
  .header-left {
    ul {
      li {
        margin-top: 10px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // height: 40px;
        span {
          font-size: 16px;

          line-height: 40px;
        }
        strong,
        p,
        h4 {
          font-size: 14px;
          color: #ccc;
        }
        img {
          width: 40px;
          height: 40px;
          border-radius: 6px;
        }
      }
    }
  }
}
.buttom {
  display: block;
  width: 375px;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  color: #666;
  background-color: #ccc;
}
</style>
<script>
import pagebottom from "../components/pagebottom";
import { mapState } from "vuex";
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    pagebottom,
  },
  data() {
    return {
      cuser: {
        userid: "",
        username: "",
        email: "",
        usercover: "",
      },
    
    };
  },
  
  computed: {
    ...mapState(["user"]),
    ...mapState(["active"]),
  },
  created() {
      

    
    this.cuser.userid = localStorage.getItem("userid");
    this.cuser.username = localStorage.getItem("username");
    this.cuser.email = localStorage.getItem("email");
    this.cuser.usercover = localStorage.getItem("usercover");
    console.log(this.cuser);
  },
  methods: {
    dislogin() {
      console.log("退出登录？！");
      localStorage.setItem("userid", "");
      localStorage.setItem("username", "");
      localStorage.setItem("email", "");
      localStorage.setItem("usercover", "");
      Dialog.alert({
        title: "是否退出登录",
      }).then(() => {
        this.$router.push({
          name: "home",
        });
      });
    },
  },
};
</script>
